class DigitalClockUI extends DateTimerUI {
  private txtHour: egret.TextField;
  private pointerHour: egret.Shape;
  private pointerMinute: egret.Shape;
  private rad1: number;
  private radius: number;

  protected createView(): void {
    this.rad1 = Math.PI / 180;
    this.radius = 80;

    this.createRing();
    this.createHour();
    this.createPointer();
  }

  private createPointer() {
    this.pointerHour = new egret.Shape();
    this.pointerMinute = new egret.Shape();

    this.pointerHour.graphics.lineStyle(10, 0xffffff);
    this.pointerHour.graphics.moveTo(0, 0);
    this.pointerHour.graphics.lineTo(this.radius *  2 / 3, 0);
    this.pointerHour.x = this.radius;
    this.pointerHour.y = this.radius;
//    this.pointerHour.anchorX = 0;
//    this.pointerHour.anchorY = 0;


    this.pointerMinute.graphics.lineStyle(3, 0xffffff);
    this.pointerMinute.graphics.moveTo(0, 0);
    this.pointerMinute.graphics.lineTo(this.radius *  7 / 8, 0);
    this.pointerMinute.x = this.radius;
    this.pointerMinute.y = this.radius;
//    this.pointerMinute.anchorX = 0;
//    this.pointerMinute.anchorY = 0;    

    this.addChild(this.pointerHour);
    this.addChild(this.pointerMinute);
  }

  private drawPointer(hour: number, minute: number) {
    this.pointerHour.rotation = 270 + 360 * (hour % 12) / 12;
    this.pointerMinute.rotation = 270 + 360 * minute / 60;
  }

  private createHour() {
    this.txtHour = new egret.TextField();
    this.txtHour.size = 28;
    this.txtHour.textColor = 0xFFFFFF;
    this.txtHour.anchorX = 0.5;
    this.txtHour.anchorY = 0.5;
    this.txtHour.background = true;
    this.addChild(this.txtHour);
  }

  private drawHour(hour: number) {
    hour %= 12;
    if (hour == 0) {
      hour = 12;
    }

    var angle = 90 - (360 * hour / 12);
    var radNow = this.rad1 * angle;

    this.txtHour.x = this.radius * (1 + Math.cos(radNow));
    this.txtHour.y = this.radius * (1 - Math.sin(radNow));
    this.txtHour.backgroundColor = this.getSkyColor();
    this.txtHour.text = hour.toString();
  }

  private getSkyColor(): number {
    var rgb: Array<string> = document.getElementById("canvasDiv").style.backgroundColor.match(/\d+/g);

    return parseInt(rgb[0]) * 256 * 256 +
      parseInt(rgb[1]) * 256 +
      parseInt(rgb[2]);
  }

  private createRing() {
    var ring: egret.Shape = new egret.Shape();
    ring.x = 0;
    ring.y = 0;
    ring.graphics.lineStyle(2, 0xFFFFFF);
    ring.graphics.drawCircle(this.radius, this.radius, this.radius);
    ring.graphics.endFill();
    this.addChild(ring);
  }

  protected timeUpdate(timer: DateTimer) {
    this.drawHour(timer.hour);
    this.drawPointer(timer.hour, timer.minute);
  }
}